<template>
  <div class="hello">
    <div class="hello-top">
      <img alt="Vue logo" src="../../assets/logo.png">
      <h3>{{ msg }}</h3>
    </div>
    <span class="iconfont">&#xe67f;</span>
    <span class="iconfont">&#xe605;</span>
    <span class="iconfont icon-qiye" />
    <span class="iconfont icon-shebao" />
    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>hello上左</el-button>
    </el-tooltip>
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      点我打开
    </el-button>

    <el-drawer
        title="我是标题"
        :visible.sync="drawer">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      drawer: false
    }
  }
}
</script>

<style lang="scss" scoped>
 .hello {
   width: 300px;
   height: 400px;
   border: 1px solid $primary;
   .hello-top {
     width: 300px;
     height: 200px;
     background-image: url("../../assets/lvfengxian.jpeg");
     background-size: cover;
   }
   img {
     height: 100px;
   }
   h3 {
     color: $success;
   }
 }
</style>
